<template>
    <!--公共场所 管理-->
    <div>
        <div class="page-header">
            <div class="page-header-title">公共场所</div>
            <div>
                <el-tabs class="el-tabs-empty" v-model="queryForm.placeType" @tab-click="onSearch">
                    <el-tab-pane label="公共场所" name="1"></el-tab-pane>
                    <el-tab-pane label="营运车辆" name="2"></el-tab-pane>
                </el-tabs>
            </div>
        </div>

        <!--列表-->
        <div class="page-content">
            <!--查询区域-->
            <div>
                <el-form ref="queryForm" :model="queryForm" label-width="120px" label-suffix="：">
                    <el-row :gutter="20">
                        <el-col :span="8" v-if="queryForm.placeType==1">
                            <el-form-item label="场所名称" prop="placeName">
                                <el-input
                                    v-model.trim="queryForm.placeName" clearable placeholder="场所名称"
                                    @keyup.enter.native="onSearch()"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" v-if="queryForm.placeType==2">
                            <el-form-item label="车牌号" prop="carNo">
                                <el-input
                                    v-model.trim="queryForm.carNo" clearable placeholder="车牌号"
                                    @keyup.enter.native="onSearch()"
                                />
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="行政区域" prop="areaName">
                                <el-input
                                    v-model.trim="queryForm.areaName" clearable  placeholder="行政区域名称"
                                    @keyup.enter.native="onSearch()"
                                />
                            </el-form-item>
                        </el-col>

                        <span v-show="queryUnfold">

                            <el-col :span="8">
                                <el-form-item label="申请人" prop="reqUsername">
                                    <el-input
                                        v-model.trim="queryForm.reqUsername" clearable  placeholder="申请人名称"
                                        @keyup.enter.native="onSearch()"
                                    />
                                </el-form-item>
                            </el-col>

                            <el-col :span="8">
                                <el-form-item label="手机号" prop="reqPhone">
                                     <el-input
                                         v-model.trim="queryForm.idCard" clearable  placeholder="申请人手机号"
                                         @keyup.enter.native="onSearch()"
                                     />
                                </el-form-item>
                            </el-col>

                            <el-col :span="8">
                                <el-form-item label="状态" prop="state">
                                    <el-select v-model="queryForm.state" placeholder="请选择" clearable>
                                        <el-option
                                            v-for="item in [{value: 1, label: '正常'}, {value: 0, label: '禁用'}]"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                      </el-select>
                                </el-form-item>
                            </el-col>

                        </span>

                        <el-col :span="8">
                            <el-form-item>
                                <el-button size="small" type="primary" @click="onSearch()">查询</el-button>
                                <el-button size="small" plain @click="onResetSearch()">重置</el-button>
                                <el-button size="small" type="text" @click="queryUnfold=!queryUnfold">{{queryUnfold?'收起':'展开'}}</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <el-divider />

            <!--操作按钮区域-->
            <div>
                <el-dropdown split-button type="primary" style="margin-right: 12px;">
                    导出
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>导出查询结果</el-dropdown-item>
                        <el-dropdown-item>导出当前页</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>

                <el-button type="primary" icon="el-icon-plus">添加</el-button>
            </div>
            <el-divider />

            <el-table
                style="min-height: 300px;"
                v-if="queryForm.placeType == 1"
                :data="data"
            >
                <el-table-column label="场所名称" prop="placeName" min-width="180">
                </el-table-column>
                <el-table-column label="行政区域" prop="areaName" width="220">
                </el-table-column>
                <el-table-column label="申请人" width="220">
                    <template slot-scope="{row}">
                        {{row.reqUsername}} - ({{row.reqPhone}})
                    </template>
                </el-table-column>

                <el-table-column label="创建时间" prop="createdTime" width="180">
                </el-table-column>

                <el-table-column label="场所状态" prop="state" width="100">
                    <template slot-scope="{row}">
                        <el-tag :type="row.state===1?'success':'danger'">{{row.state===1?'正常':'禁用'}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="120">
                    <template slot-scope="{row}">
                        <el-button type="text" size="small">编辑</el-button>
                        <el-button type="text" size="small">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-table
                style="min-height: 300px;"
                v-if="queryForm.placeType == 2"
                :data="data"
            >
                <el-table-column label="运营公司" prop="companyName" width="180">
                </el-table-column>
                <el-table-column label="车牌号" prop="carNo" min-width="180">
                </el-table-column>
                <el-table-column label="车辆类型" prop="carType" width="180">
                </el-table-column>
                <el-table-column label="行政区域" prop="areaName" width="220">
                </el-table-column>
                <el-table-column label="申请人" width="220">
                    <template slot-scope="{row}">
                        {{row.reqUsername}} - ({{row.reqPhone}})
                    </template>
                </el-table-column>

                <el-table-column label="创建时间" prop="createdTime" width="180">
                </el-table-column>

                <el-table-column label="场所状态" prop="state" width="100">
                    <template slot-scope="{row}">
                        <el-tag :type="row.state===1?'success':'danger'">{{row.state===1?'正常':'禁用'}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="120">
                    <template slot-scope="{row}">
                        <el-button type="text" size="small">编辑</el-button>
                        <el-button type="text" size="small">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页-->
            <div style="background-color: white; text-align: center;padding: 6px 12px;margin-top: 12px;">
                <el-pagination
                    :current-page.sync="pageSet.page"
                    :page-sizes="[10,20,50,100,200]"
                    :page-size="pageSet.pageSize"
                    background layout="total, prev, pager, next, sizes, jumper"
                    @size-change="handlePageSizeChange"
                    @current-change="handleCurrentPageChange"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "List",
        data() {
            return {
                data: [],
                total: 0,
                pageSet: {
                    page: 1,
                    pageSize: 20,
                },

                // 展开查询字段
                queryUnfold: false,
                queryForm: {
                    placeType: "1",
                    state: null,
                },
            }
        },
        created(){
            this.findList();
        },
        methods: {
            /**
             * 获取列表数据
             */
            findList(){
                let queryForm = {
                    ...this.queryForm,
                    ...this.pageSet,
                };

                this.$api.codePlace.query(queryForm).then(res=>{
                    let data = res.data;
                    let list = res.data.records;
                    this.data = list;
                    this.total = data.total;
                });
            },
            /**
             * 分页大小改变
             */
            handlePageSizeChange(val){
                this.onSearch();
            },
            /**
             * 当前页改变
             */
            handleCurrentPageChange(page){
                this.findList();
            },
            /**
             * 执行查询
             */
            onSearch(){
                this.pageSet.page = 1;
                this.findList();
            },
            /**
             * 重置表单字段
             */
            onResetSearch(){
                this.$refs.queryForm.resetFields();
                // this.queryForm.state = null;
                // this.queryForm.codeState = null;
                this.onSearch();
            },
        },
    }
</script>

<style scoped>

</style>
